Fireworks CS6是一个功能强大的平面图片设计软件。 Fireworks有许多专门针对网页设计的工具与功能,可以方便地进行网页图片的设计和开发与Photoshop不同的是, Fireworks除了具有 Photoshop一样的图片设计功能以外,还有专门针对网页设计的切片工具和图片优化工具,可以方便地完成图片的网页切片和图片的优化。如图9-1所示为Fireworks CS6的工作界面。
同 Dreamweaver一样, Fireworks下面是“属性”面板。单击设计区的对象以后,“属性”面板会显示与这个对象相关的属性,可以在“属性”面板中对这个对象的属性进行设置。右边是各种工作对话框,左边有着和 Photoshop相似的工具条。
在工具栏中部的web工具中,分别为“矩形热点工具”“切片工具”“隐藏切片与热点工具”“显示切片与热点工具”。这4个工具是专门用来对网页进行切割和建立热点链接。
网页效果图上有各种功能模块,这些功能模块需要根据版面的内容用 Fireworks进行切割。网站的Logo、Banner、导航条、图片等内容都需要切割出来,切割完成以后需要进行优化与输出。
在进行页面切图时,首先要确定需要切图的内容。切图的内容就是需要输出到网页上的内容。网站的Logo、 Banner、图片等内容,需要按照布局与大小切割成小图片。
在进行切片时,需要考虑到网页的内容制作和布局排版、网页编程等因素。合理的网页切图有利于网页的排版与设计，切图时需要注意以下内容。
不要把一个完整的图片部分切割到两个图片。
可能输入文字的区域不需要切片。
不需要输出的背景可以不切片。
在切片时需要注意不同切片的布局,应尽量整齐排列。
每一个切片的大小要合适。太大的图片不利于下载,如果图片太小会产生很多图片。
使用切片工具进行网页切片。单击工具栏中的“切片工具”國,在图片的Logo上面按住鼠标左键不放拖动,切割这个Logo图片。切割的图片以较深的颜色显示。
用步骤(2)的方法,将艺术字与 Banner图片切割成两个切片。在切片时,需要注意切片的高度应与Logo图片切片的高度相同。
继续切割网页导航条、网页布局区域中的图片内容。在这些切片中,需要这些切片的大小合适、布局合理。同时需要考虑到在 Dreamweaver Cs6中便于网页的排版。
